<template>
	<view class="mainCon">
		<view class="headForm">
			<u-form :model="formData" ref="uForm" label-width="160">
				<u-form-item label="委托号">
					<u-input v-model="formData.wtno" />
				</u-form-item> 
				<u-form-item label="车号" label-width="160">
					<u-input type="select" :select-open="carCodeShow" v-model="formData.carCode.label"
						placeholder="请选择车号" @click="carCodeShow = true"></u-input>
				</u-form-item>
				<u-form-item label="手机号">
					<u-input v-model="formData.phone" type="number" />
				</u-form-item>
				<u-form-item label="箱号">
					<u-input v-model="formData.xh" />
				</u-form-item> 
			</u-form> 
			<view class="btnGroup">
				<u-button :custom-style="customStyle" type="primary" @click="onSearch">查询</u-button>  
			</view>
		</view>
		<view style="height: 500rpx;">

		</view>
		<view class="empty" style="margin-top: 50rpx;" v-if="list.length==0">
			<u-empty text="暂无相关数据" mode="list"></u-empty>
		</view>
		<view class="listCon">
			<view class="listItem" v-for="(item, index) in list" :key="index"> 
				<view class="infoCon">
					<view>
						<view class="cellItem">
							<view class="label">
								提单号：
							</view>
							<view class="value">
								{{item.TIDANNO}}
							</view>
						</view>
						<view class="cellItem">
							<view class="label">
								委托号/序号：
							</view>
							<view class="value">
								{{item.WTNO}}  /  {{item.TIDANXH}}
							</view>
						</view> 
						<view class="cellItem">
							<view class="label">
								作业方式：
							</view>
							<view class="value">
								<template v-if="item.WORKWAY=='FOEI'">
									重出空回
								</template>
								<template v-if="item.WORKWAY=='EOFI'">
									空出重回
								</template> 
							</view>
						</view>
						
						<view class="cellItem">
							<view class="label">
								箱号：
							</view>
							<view class="labelTag">
								{{item.XH}}
							</view>
						</view>
						<view class="cellItem">
							<view class="label">
								箱尺：
							</view>
							<view class="value">
								{{item.XC}}{{item.XX}}
							</view>
						</view>
						<view class="infoCell">
							<view class="labelName">
								箱主
							</view>
							<view class="infoCon">
								{{item.XGS}}
							</view>
						</view>
					</view> 
				</view> 
				<template v-if="item.WORKWAY=='EOFI'">
					<u-button type="primary" text="重出重回" @click="tapzczhSubmit(item)" size="mini">重出重回</u-button>
				</template>
				<template v-if="item.WORKWAY=='EOEI'">
					<u-button type="primary" text="空出空回" @click="tapkckhSubmit(item)" size="mini">空出空回</u-button>
				</template>
			</view>
		</view>
		<u-select mode="single-column" :list="workwayList" v-model="workwayShow" @confirm="workwayConfirm"
			value-name="WORK_WAY" label-name="NAME"></u-select>
		<u-select mode="single-column" :list="carCodeList" v-model="carCodeShow" @confirm="carCodeConfirm"
			value-name="TRUCKER_NO" label-name="PLAT_NO"></u-select>

		<u-select mode="single-column" :list="expressList" v-model="expresShow" @confirm="expressConfirm"
			value-name="WLGS" label-name="WLGS"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					height: '60rpx',
				}, 
				formData: { 
					xh:'',
					wtno: '',
					phone: '',
					carCode: {
						label: '',
						value: ''
					} 
				},
				workwayShow: false, 
				carCodeShow: false,
				carCodeList: [], 
				truckname: uni.getStorageSync("nickName"),
				list: [],
				isCheckAll: false,
				expresShow: false,
				flag: false
			};
		},
		onLoad() {
			this.getOptions()
		}, 
		methods: {
			getOptions() {
				uni.request({
					url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/DpvWhKKMGBMIhEN?truckname=' + this.truckname,
					method: "get",
					success: (res) => {
						this.carCodeList = res.data.rows
					}
				}) 
				this.getList()
			},
			getList() { 
				if (this.formData.wtno == '')
					return uni.showToast({
						title: '请输入委托号',
						icon: 'none'
				})
				uni.showLoading({
					title: '加载中...'
				})
					uni.request({
						url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/jUp6o9K79ApR2gK?truckname=' + this
							.truckname +
							'&xh=&wtno=' + this.formData.wtno + '&tidanno=&workway=',
						method: "get",
						success: (res) => {
							this.isCheckAll = false
							res.data.rows.forEach((item) => {
								item.checked = false
							})
							this.list = res.data.rows
							uni.hideLoading()
						}
					}); 
			}, 
			carCodeConfirm(e) {
				this.formData.carCode = e[0]
				this.formData.phone = e[0].value
			}, 
			onSearch() { 
				uni.showLoading({
					title: '加载中...'
				}) 
				this.getList()
			},   
			tapzczhSubmit(item) {
				this.zczhandkckhsubmit(item,"FOFI");
			},
			tapkckhSubmit(item) {
				this.zczhandkckhsubmit(item,"EOEI");
			},
			zczhandkckhsubmit(item,workway){
				if (this.flag) return 
				 
				if (this.formData.carCode.label == '' || this.formData.phone == '' || this.formData.xh == '' || this.formData.xh == null)
					return uni.showToast({
						title: '请输入车号手机号、箱号',
						icon: 'none'
					}) 
				this.flag = true
				
				uni.request({
					url: 'https://api.zlkj-port.com/szgjapi/zlzg/cntr/check?cntr=' + this.formData.xh,
					method: "get",
					success: (yzRes) => {
						if (yzRes.data.code == 200) {  
								uni.request({
									url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/wm7CGdRlaaCOdJx?cntr=' + yzRes.data.message,
									method: "get",
									success: (res2) => {
										if (res2.data.total>0) { 
												uni.request({
													url: 'https://api.zlkj-port.com/szgjapi/zlzg/U/uuBbE6eXzhhRdQY?cntr=' + yzRes.data.message,
													method: "get",
													success: (res2) => {
														if (res2.data.message == '操作成功') {
															let checkList = []
															checkList.push({
																workway:workway,
															 	carcode: this.formData.carCode.label,
															 	zhipaipeoper: item.truckname,
																cntr: yzRes.data.message,
															 	truckerno: this.formData.phone,
															 	id: item.ID
															})
															uni.request({
																url: 'https://api.zlkj-port.com/szgjapi/zlzg/A/Hos7TT1GlRqqGQ9',
																data: {
																	List: JSON.stringify(checkList)
																},
																header: {
																	'Content-Type': 'application/x-www-form-urlencoded'
																},
																method: "POST",
																success: (res) => {
																	this.flag = false
																	uni.showToast({
																		title: '提交成功'
																	}) 
																	 
																	setTimeout( () => {
																	   this.getList()
																	}, 1000)
																},
																fail() {
																	this.flag = false
																}
															})  
														}
													}
												})  
											
										}else{
											uni.showToast({
												title: '箱号没有对应的数据,请重新输入',
												icon: 'none'
											})
										}
									}})
							 } else {
							uni.showToast({
								title: yzRes.data.message,
								icon: 'none'
							})
							this.flag = false
							return
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item {
		padding: 6rpx !important;
	}
	page {
		background-color: #F2F1F9;
	}
	.headForm {
		padding: 20rpx;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 10;
		background-color: #FFFFFF;

		.btnGroup {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 15rpx;
		}
	}

	.listCon {

		.listItem {
			padding: 20rpx;
			border-bottom: 1px solid $u-border-color;
			display: flex;
			align-items: center;

			.checkBox {}

			.infoCon {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.cellItem {
					display: flex;
					align-items: center;
					font-size: 28rpx;

					.label {}
				}
				.labelTag {
					background-color: #E0EDFB;
					color: #4C86E7; 
					line-height: 50rpx;
					border-radius: 25rpx;
					font-size: 26rpx;
					text-align: center;
					padding-right: 15rpx;
					padding-left: 15rpx;
				}
			}
		}
	}
</style>
